import { App, Form, Input, Button } from 'antd'
import logo from '@/assets/logo.jpg'
import background from '@/assets/background.jpg'
import * as Api from '@/api/register'

import "./register.css"

const formItemLayout = {
  labelCol: {
    xs: { span: 6 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 16 },
    sm: { span: 16 },
  }
}

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 10,
    },
    sm: {
      span: 24,
      offset: 10,
    },
  },
};

const Register = () => {
  const [ register ] = Form.useForm()
  const { message } = App.useApp()

  const submit = async (values) => {
    console.log(values)

    try {
      await Api.submit({}, { form: values })
      message.success('注册成功')
    } catch (err) {
      message.error(err)
    }
  }

  return (
    <div className='register-container'>
      <div className="register-form">
        <p className="logo-container">
          <img style={{ width: '188px' }} src={ logo } alt="" />
        </p>
        <Form { ...formItemLayout } form={ register } onFinish={ submit }>
          <Form.Item name="username" label="用户名">
            <Input name="username" placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item name="password" label="密码">
            <Input type="password" name="password" placeholder="请输入密码" />
          </Form.Item>
          <Form.Item name="invite_code" label="邀请码">
            {/* <Select placeholder="请选择邀请码">
              {
                inviteList.map((item) => (
                  <Select.Option value={ item }>{ item }</Select.Option>
                ))
              }
            </Select> */}
            <Input name="invite_code" placeholder="请输入邀请码" />
          </Form.Item>
          <Form.Item { ...tailFormItemLayout }>
            <Button type="primary" htmlType="submit">提交</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Register
